import React, { Component } from 'react';
import _ from 'underscore';

import Select from 'lib/components/Select.jsx';

import { defaultApi } from '../../apis/core-util';

export default class SettingItem extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = _.extend({}, props.item, {
      suggests: []
    });

    this.suggestApi = defaultApi({
      __url: () => `sd/${ BlueWare.appId }/api/property/${this.state.field.object.id}/values`,
      limit: 19
    });
  } // constructor

  inputGroupFilterChanged() {
    let left = this.refs.filter.value.trim();
    let right = this.refs.filter1.value.trim();

    this.props.onFilterChanged({
      left,
      right
    }, this.props.index);
  } // inputGroupFilterChanged

  loadSuggests() {
    if (this.state.func.valueType === 'select') {
      this.suggestApi
          .fetch()
          .fail(() => this.setState({ suggests: [] }))
          .done(data =>
            this.setState({
              suggests: data.map(item => ({
                label: item,
                value: item
              }))
            })
          );
    }
  } // loadSuggests

  componentDidMount() {
    this.loadSuggests();
  } // componentDidMount

  componentWillReceiveProps(nextProps) {
    // field 发生变更后，重新加载 suggests 列表。
    let reload = this.state.field !== nextProps.item.field;

    this.setState(nextProps.item, () => {
      if (reload) {
        this.loadSuggests();
      }
    });
  } // componentWillReceiveProps

  render() {
    return (
      <div className="condition pure-g">
        <div className="pure-u-1-4">
          <Select
            ref="field"
            showSingleTooltip={ true }
            options={ this.props.properties }
            onChange={ item => this.props.onFieldChanged(item, this.props.index) }
            value={ this.state.field } />
        </div>
        <div className="pure-u-1-4">
          <Select
            ref="func"
            options={ this.state.funcs }
            onChange={ item => this.props.onFunctionChanged(item, this.props.index) }
            value={ this.state.func } />
        </div>
        <div className="pure-u-3-8">
        {
          this.state.func.valueType === 'input'
            ? (
              <div style={{ marginRight: '10px' }}>
                <input
                  ref="filter"
                  type="text"
                  className="input-text"
                  onChange={ e => this.props.onFilterChanged(e.target.value.trim(), this.props.index) }
                  value={ this.state.filter } />
              </div>
            ) : null
        }
        {
          this.state.func.valueType === 'single-select'
            ? (
              <Select
                ref="filter"
                multi={ false }
                addNoMatch={ true }
                options={ this.state.suggests }
                onChange={ item => this.props.onFilterChanged(item, this.props.index) }
                value={ this.state.filter } />
            ) : null
        }
        {
          this.state.func.valueType === 'select'
            ? (
              <Select
                ref="filter"
                multi={ true }
                addNoMatch={ true }
                options={ this.state.suggests }
                onChange={ item => this.props.onFilterChanged(item, this.props.index) }
                value={ this.state.filter } />
            ) : null
        }
        {
          this.state.func.valueType === 'input-group'
            ? (
              <div className="pure-g" style={{ marginRight: '10px' }}>
                <div className="pure-u-2-5">
                  <input
                    ref="filter"
                    type="text"
                    className="input-text"
                    onChange={ this.inputGroupFilterChanged.bind(this) }
                    value={ (this.state.filter || {}).left } />
                </div>
                <div
                  className="pure-u-1-5 text-align-center"
                  style={{ lineHeight: '34px' }}>
                  至
                </div>
                <div className="pure-u-2-5">
                  <input
                    ref="filter1"
                    type="text"
                    className="input-text"
                    onChange={ this.inputGroupFilterChanged.bind(this) }
                    value={ (this.state.filter || {}).right } />
                </div>
              </div>
            ) : null
        }
        </div>
        <div className="pure-u-1-8 text-align-center">
          <a
            href="javascript:;"
            style={{ float: 'none' }}
            onClick={ () => this.props.onRemove(this.props.index) }
            className="close">
            &times;
          </a>
        </div>
      </div>
    ); // return
  } // render
}

SettingItem.defaultProps = {
  id: 0,
  item: {},
  properties: [],
  onFieldChanged: item => {},
  onFunctionChanged: item => {},
  onFilterChanged: item => {},
  onRemove: index => {}
}
